<template>
  <div>
    <a-row :gutter="20">
      <a-col v-for="(item,index) in list" :key="index" :span="12">
        <ant-card class="Card">
          <template #content>
            <div class="topTitle">{{item.title}}</div>
            <pie :props="item" />
          </template>
        </ant-card>
      </a-col>
    </a-row>
    <ant-card class="Card">
      <template #content>
        <div class="topTitle">学生数量变化图</div>
        <columnar :props="columnar" :alias="alias" />
      </template>
    </ant-card>
    <ant-card>
      <template #content>
        <div class="topTitle">男生、女生、蒙族比例变化折线图</div>
        <more-line :height="400" :sourceData="sourceData" />
      </template>
    </ant-card>
    <ant-card style="margin-top:20px">
      <template #content>
        <div class="topTitle">地理位置分布图</div>
        <map-d class="mapD" :height="500"/>
      </template>
    </ant-card>
  </div>
</template>
<script lang="ts">
const MapD = () =>
  import("../../components/Chart/Province/Province.vue").then(
    m => m.default || m
  );
import { Component, Vue } from "vue-property-decorator";
const MoreLine = () =>
  import("../../components/Chart/Line/MoreLine.vue").then(m => m.default || m);
const Columnar = () =>
  import("../../components/Chart/Columnar/Columnar.vue").then(
    m => m.default || m
  );
const Pie = () =>
  import("../../components/Chart/Pie/Pie.vue").then(m => m.default || m);
const AntCard = () =>
  import("../../components/Card.vue").then(m => m.default || m);
import { Columnar as StudentChange } from "../../models/Chat/Columnar";
import { Basis } from "../../models/Chat/Pie";
@Component({
  layout: "menu",
  name: "StudentFilesModule-Home",
  components: {
    MapD,
    MoreLine,
    Columnar,
    Pie,
    AntCard
  }
})
export default class Home extends Vue {
  alias: string = "学生";
  sourceData = [
    {
      month: "2018",
      city: "男生",
      temperature: 7
    },
    {
      month: "2018",
      city: "女生",
      temperature: 3.9
    },
    {
      month: "2018",
      city: "蒙族",
      temperature: 6.9
    },
    {
      month: "2019",
      city: "男生",
      temperature: 4.2
    },
    {
      month: "2019",
      city: "女生",
      temperature: 10
    },
    {
      month: "2019",
      city: "蒙族",
      temperature: 12
    }
  ];
  columnar: StudentChange = {
    Height: 400,
    sourceData: [
      {
        year: "1998",
        sales: 100,
        type: "学生数量"
      },
      {
        year: "2000",
        sales: 200,
        type: "学生数量"
      }
    ]
  };
  pie: Basis = {
    Height: 400,
    title: "在校学生总数，不同年级数量",
    sourceData: [
      {
        item: "一年级",
        count: 100
      },
      {
        item: "二年级",
        count: 200
      }
    ]
  };
  pieOne: Basis = {
    Height: 400,
    title: "男女数量比例",
    sourceData: [
      {
        item: "男",
        count: 100
      },
      {
        item: "女",
        count: 200
      }
    ]
  };
  pieTwo: Basis = {
    Height: 400,
    title: "民族数量比例",
    sourceData: [
      {
        item: "汉族",
        count: 100
      },
      {
        item: "蒙族",
        count: 200
      }
    ]
  };
  pieFree: Basis = {
    Height: 400,
    title: "年龄数量比例",
    sourceData: [
      {
        item: "12",
        count: 100
      },
      {
        item: "13",
        count: 200
      }
    ]
  };
  list: any[] = [];
  created() {
    let newArray: any[] = [];
    newArray.push(this.pie);
    newArray.push(this.pie);
    newArray.push(this.pieOne);
    newArray.push(this.pieTwo);
    newArray.push(this.pieFree);
    this.list = newArray;
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 500px;
  height: 500px;
}
.topTitle {
  text-align: center;
  font-size: 30px;
  margin-bottom: 15px;
  margin-top: 15px;
}
.Card {
  margin-bottom: 10px;
}
.mapD {
  widows: 1000px;
  height: 500px;
}
</style>